<template>
  <div class="app-main-content" style="height: 96%">
    <div style="display: flex; justify-content: space-between">
      <el-row>
        <el-button v-oauth data-oauthUuid="1620437385000" type="primary" icon="el-icon-plus" @click="handleAdd">
          新增
        </el-button>
        <el-button
          v-oauth data-oauthUuid="1620437577000"
          type="danger"
          icon="el-icon-delete"
          :loading="delBtnLoading"
          :disabled="!selected.length"
          @click="handleDeleteAll"
        >
          删除
        </el-button>
      </el-row>
      <query-form
        class="query-form"
        :options="searchOptions"
        @query="onSearch"
      />
    </div>
    <scmsa-table
      ref="topTable"
      v-loading="tableLoading"
      :data="tableData"
      :column="tableColumn"
      align="center"
      border
      :height="tableTopHeight"
      highlight-current-row
      pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalPage"
      :row-key="(row) => row.id"
      @row-click="rowClickChange"
      @size-change="handlePageSizeChange"
      @pagination-current-change="handlePageCurrentChange"
      @selection-change="handleSelectionChange"
    />
    <el-divider></el-divider>
    <div style="display: flex; justify-content: space-between">
      <el-row>
        <el-button
          v-oauth data-oauthUuid="1620437600000"
          type="primary"
          icon="el-icon-plus"
          :disabled="isHaveCode"
          @click="bottomHandleAdd"
        >
          新增
        </el-button>
        <el-button
          v-oauth data-oauthUuid="1620437618000"
          type="danger"
          icon="el-icon-delete"
          :loading="bottomDelBtnLoading"
          :disabled="!bottomSelected.length"
          @click="bottomHandleDeleteAll"
        >
          删除
        </el-button>
      </el-row>
      <query-form
        class="childQueryform"
        :options="childSearchOptions"
        @query="onChildSearch"
      />
    </div>
    <scmsa-table
      ref="childTable"
      v-loading="bottomTableLoading"
      :data="tableBottomData"
      :column="tableBottomColumn"
      :height="tableTopHeight"
      border
      :pagination="true"
      :current-page="bottomCurrentPage"
      :page-size="bottomPageSize"
      :total="bottomTotalPage"
      @size-change="bottomHandlePageSizeChange"
      @pagination-current-change="bottomHandlePageCurrentChange"
      @selection-change="bottomHandleSelectionChange"
    />

    <valuecode ref="valuecode" @refresh="fetchTableData" />
    <childcode ref="childcode" @refresh="fetchBottomTable" />
  </div>
</template>

<script>
import { getValueSetCodeListByCode, delValueSetCode } from '@/api/valueset'
import { findPageOfDesc, delDesc } from '@/api/valuesetDesc'
import mixin from './mixin'
import valuecode from './valuecode'
import childcode from './childcode'

export default {
  name: 'ValueSet',
  components: {
    valuecode,
    childcode,
  },
  mixins: [mixin],
  data() {
    return {
      tableLoading: false,
      bottomTableLoading: false,
      bottomDelBtnLoading: false,
      currentPage: 1,
      bottomCurrentPage: 1,
      pageSize: 10,
      bottomPageSize: 10,
      loading: false,
      delBtnLoading: false,
      selected: [],
      bottomSelected: [],
      dialog: false,
      bottomDdialog: false,
      editIndex: 0,
      clickCode: null,
      actionForm: {
        code: '',
        VALUE_DESC: '',
      },
      queryForm: {
        value: null,
      },
      bottomForm: {
        value: null,
      },
      bottomActionForm: {},
      params: {
        page: 1,
        limit: 10,
      },
      tableData: [],
      tableBottomData: [],
      totalPage: 0,
      bottomTotalPage: 0,
      queryChildForm: {},
    }
  },
  computed: {
    tableTopHeight() {
      return (
        this.$store.state.settings &&
        this.$store.state.settings.tableHeight * 0.5 - 48
      )
    },
    isHaveCode() {
      return this.clickCode == null
    },
    tableColumn() {
      return [
        {
          type: 'selection',
          width: 55,
          align: 'center',
        },
        {
          prop: 'valueSetCode',
          label: '值集代码',
        },
        {
          prop: 'valueDesc',
          label: '值集描述',
        },
        {
          prop: 'opDivision',
          label: '操作类型',
          align: 'center',
          render: (h, scope) => {
            // 0-新增、1－修改、2－删除
            return <div>{this.transType(scope.row.opDivision)}</div>
          },
        },
        {
          prop: 'valueDesc',
          align: 'center',
          label: '值集描述',
        },
        {
          prop: 'lastUpdatePerson',
          align: 'center',
          label: '最后修改人',
        },
        {
          prop: 'lastyUpdateTime',
          align: 'center',
          label: '最后修改时间',
        },
        {
          label: '操作',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'el-button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    icon: 'el-icon-edit',
                    loading: false,
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params)
                    },
                  },
                },
                '编辑'
              ),
              h('el-divider', {
                props: {
                  direction: 'vertical',
                },
              }),
              h(
                'el-button',
                {
                  props: {
                    type: 'text',
                    size: 'small',
                    icon: 'el-icon-delete',
                    loading: false,
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params)
                    },
                  },
                },
                '删除'
              ),
            ])
          },
        },
      ]
    },
    tableBottomColumn() {
      return [
        {
          type: 'selection',
          width: 55,
          fixed: 'left',
          align: 'center'
        },
        {
          prop: 'val',
          label: '值代码',
          align: 'center'
        },
        {
          prop: 'valueSetCode',
          label: '值集代码',
          align: 'center'
        },
        {
          prop: 'opDivision',
          label: '操作类型',
          align: 'center',
          render: (h, scope) => {
            return <div>{this.transType(scope.row.opDivision)}</div>
          }
        },
        {
          prop: 'valueDesc',
          align: 'center',
          label: '值集描述'
        },
        {
          prop: 'validStartDate',
          align: 'center',
          label: '有效起始日期'
        },
        {
          prop: 'validEndDate',
          align: 'center',
          label: '有效终止日期'
        },
        {
          prop: 'lastUpdatePerson',
          align: 'center',
          label: '最后修改人'
        },
        {
          prop: 'lastlyUpdateTime',
          align: 'center',
          label: '最后修改时间'
        },
        {
          prop: 'remark',
          align: 'center',
          label: '备注'
        },
        {
          label: '操作',
          width: 200,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h('el-button', {
                props: { type: 'text', size: 'small', icon: 'el-icon-edit', loading: false },
                style: { marginRight: '5px' },
                on: {
                  click: () => {
                    this.bottomHandleEdit(params)
                  }
                }
              }, '编辑'),
              h('el-divider', {
                props: { direction: 'vertical' }}),
              h('el-button', {
                props: { type: 'text', size: 'small', icon: 'el-icon-delete', loading: false },
                on: {
                  click: () => {
                    this.bottomHandleDelete(params)
                  }
                }}, '删除')
            ])
          }
        }
      ]
    }
  },
  mounted() {
    this.fetchTableData()
  },
  methods: {
    rowClickChange(row, column, cell, event) {
      this.getDescData(row.valueSetCode)
    },
    fetchBottomTable() {
      this.bottomTableLoading = true
      findPageOfDesc(null, {
        page: this.bottomCurrentPage,
        size: this.bottomPageSize,
        code: this.clickCode,
        ...this.queryChildForm,
      })
        .then((res) => {
          this.tableBottomData = res.data
          this.bottomTotalPage = res.total
          this.$nextTick(() => {
            this.$refs.childTable.$refs.elTable.doLayout()
          })
        })
        .catch(() => {})
        .finally(() => {
          this.bottomTableLoading = false
        })
    },
    // 转换表格内操作类型
    transType(value) {
      return value == 0
        ? '新增'
        : value == 1
        ? '修改'
        : value == 2
        ? '删除'
        : '类型异常'
    },
    fetchTableData() {
      this.tableLoading = true
      getValueSetCodeListByCode(null, {
        page: this.currentPage,
        size: this.pageSize,
        ...this.queryForm,
      })
        .then((res) => {
          this.tableData = res.data
          this.totalPage = res.total
          this.$nextTick(() => {
            this.$refs.topTable.$refs.elTable.doLayout()
          })
        })
        .catch(() => {})
        .finally(() => {
          this.tableLoading = false
        })
    },
    getDescData(val) {
      this.clickCode = val
      this.fetchBottomTable()
    },
    // 每页条数发生改变时返回值
    handlePageSizeChange(v) {
      this.pageSize = v
      this.fetchTableData()
    },
    bottomHandlePageSizeChange(v) {
      this.bottomPageSize = v
      this.fetchBottomTable()
    },
    // 当前选中页发生改变时返回值
    handlePageCurrentChange(v) {
      this.currentPage = v
      this.fetchTableData()
    },
    bottomHandlePageCurrentChange(v) {
      this.bottomCurrentPage = v
      this.fetchBottomTable()
    },
    // checkbox 当选择项发生变化时会触发该事件
    handleSelectionChange(v) {
      this.selected = v
    },
    bottomHandleSelectionChange(v) {
      this.bottomSelected = v
    },
    bottomOnSearch() {
      this.fetchBottomTable()
    },
    bottomOnReset(formName) {
      this.$refs[formName].resetFields()
      this.currentPage = 1
      this.clickCode = null
      this.fetchBottomTable()
    },
    // 重置form
    resetFieldsForm(formName) {
      this.$refs[formName].resetFields()
      this.actionForm = {}
    },
    // 查询重置
    onReset(formName) {
      this.$refs[formName].resetFields()
      this.currentPage = 1
      this.fetchTableData()
    },
    // 查询搜索
    onSearch(queryParms) {
      this.currentPage = 1
      this.pageSize = 10
      this.queryForm = queryParms
      this.fetchTableData()
    },
    // TODO
    onChildSearch(queryParms) {
      this.bottomCurrentPage = 1
      this.bottomPageSize = 10
      this.queryChildForm = queryParms
      this.fetchBottomTable()
    },
    // 点击添加
    handleAdd() {
      this.$refs.valuecode.show()
    },
    bottomHandleAdd() {
      this.$refs.childcode.show(this.clickCode)
    },
    // 批量删除
    handleDeleteAll() {
      this.$confirm('确定执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delBtnLoading = true
          const ids = this.selected.map((item) => item.id)
          delValueSetCode(null, ids)
            .then((res) => {
              this.$message.success('成功')
              this.fetchTableData()
            })
            .catch(() => {})
            .finally(() => {
              this.delBtnLoading = false
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    bottomHandleDeleteAll() {
      this.$confirm('确定执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.bottomDelBtnLoading = true
          const ids = this.bottomSelected.map((item) => item.id)
          delDesc(null, ids)
            .then((res) => {
              this.$message.success('成功')
              this.fetchBottomTable()
            })
            .catch(() => {})
            .finally(() => {
              this.bottomDelBtnLoading = false
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    bottomHandleDelete(params) {
      this.$confirm('确定执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const id = params.row.id
          if (!id) {
            this.$message.warn('数据异常')
          }
          delDesc(null, [id])
            .then((res) => {
              this.$message.success('删除成功')
              this.fetchBottomTable()
            })
            .catch(() => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 删除
    handleDelete(params) {
      this.$confirm('确定执行删除操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const id = params.row.id
          if (!id) {
            this.$message.warn(`数据异常`)
          }
          delValueSetCode(null, [id])
            .then((res) => {
              this.$message.success('删除成功')
              this.fetchTableData()
            })
            .catch(() => {})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 编辑
    handleEdit(params) {
      this.$refs.valuecode.show(params.row)
    },
    bottomHandleEdit(params) {
      this.$refs.childcode.show('edit', params.row)
    },
  },
}
</script>

<style scoped>
.valueSetCodeA {
  color: blue;
}
</style>
